<template>
  <div>
    <div class="app-container">
      <el-form :model="queryParams" size="small" :inline="true">
        <el-row>
          <el-col span="20">
            <el-form-item label="用户名:">
              <el-input v-model="queryParams.userName"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-button type="primary" style="float: right; padding-bottom: 5px" size="small" @click="getUserList">查询</el-button>
    </div>
    <!--      树-->
    <div class="search_result">
      <div style="float:left;width:120px;margin-top:50px">
        <el-col :span="12">
          <span class="textitem">权限组:</span>
          <el-select v-model="queryParams.roleGroup" @change="changeGroup" filterable clearable placeholder="请选择"
                     size="small" style="width: 100px">
            <el-option
              v-for="(item, key) in roleGroup"
              :key="key"
              :value="item"
              :label="item"
              size="small"
            ></el-option>
          </el-select>
        </el-col>
      </div>
      <div style="float:right;width:650px;margin-top:50px">
        <el-table :stripe='true' :border='true' ref="multipleTable"
                  :data="configTableData" tooltip-effect="dark" style="width: 100%" @select="addUserToGroup">
          <el-table-column type="selection" show-overflow-tooltip>
          </el-table-column>
          <el-table-column sortable prop="account" label="账号" show-overflow-tooltip/>
          <el-table-column sortable prop="userName" label="用户" show-overflow-tooltip/>

          <span slot='append' v-show='showWarning'>
      <el-alert :title="warningMsg" type="warning">
      </el-alert>
    </span>
        </el-table>

        <!--分页-->
        <p-paging @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" :currPage='currPage'
                  :pageSize="pageSize" :total='total'/>
      </div>
    </div>
  </div>
</template>

<script>
import {groupList, userList, addUser} from '@/api/user/userGroup'
import DocHeader from '../../components/header/DocHeader'
import pConfigConfirm from '@/views/config/ConfigConfirm'
import pPaging from '@/components/paging'
export default {
  name: 'page',
  components: {
    DocHeader,
    pConfigConfirm,
    pPaging
  },
  data () {
    return {
      //  新增/编辑页面展示
      open: false,
      queryParams: {
        userName: '',
        roleGroup: ''
      },
      showWarning: false,
      warningMsg: '',
      //  权限组
      roleGroup: [],
      //  配置分页数据
      configTableData: [],
      //  配置新增‘编辑标识
      handle: '',
      total: 0,
      // 默认第一页
      currPage: 1,
      pageSize: 10,
      configForm: {},
      multipleSelection: [],
      userGroupParam: {
        group: '',
        account: []
      }
    }
  },
  created () {
    this.getGroupList()
    this.getUserList()
  },
  computed: {
  },
  methods: {
    //  数据查询
    getGroupList () {
      // 请求接口后取数据给tableData赋值
      // 请求的接口的参数给个参考
      groupList().then((res) => {
        if (res.code === 0) {
          this.roleGroup = res.data
        }
      })
    },
    getUserList () {
      userList(this.queryParams.userName, this.queryParams.roleGroup).then((res) => {
        if (res.code === 0) {
          this.$refs.multipleTable.clearSelection()
          this.configTableData = []
          let data = JSON.parse(JSON.stringify(res.data))
          this.configTableData = data.splice(
            (this.currPage - 1) * this.pageSize,
            this.pageSize
          )
          this.total = res.data.length
        }
      })
    },
    handleSizeChange (val1) {
      // 改变每页显示数量重新请求数据，重置当前页为第一页
      this.pageSize = val1
      this.currPage = 1
      this.configTableData = []
      this.getUserList()
    },
    handleCurrentChange (val) {
      // 点击改变当前页
      this.currPage = val
      this.configTableData = []
      this.getUserList()
    },
    closeEdit (val) {
      this.open = val
      this.replaceShow = val
    },
    //  查询功能组用户
    changeGroup () {
      userList(this.queryParams.userName, this.queryParams.roleGroup).then((res) => {
        if (res.code === 0) {
          this.$refs.multipleTable.clearSelection()
          for (var i = 0; i < res.data.length; ++i) {
            if (res.data[i].isSelect && this.queryParams.roleGroup) {
              this.$refs.multipleTable.toggleRowSelection(res.data[i], true)
            }
            this.configTableData[i] = res.data[i]
            this.total = res.data.length
          }
        }
      })
    },
    //  权限组添加用户
    addUserToGroup (val) {
      if (this.queryParams.roleGroup === '') {
        this.$notify({
          title: '警告',
          message: '请先选择权限组',
          type: 'warning'
        })
        return
      }
      let acc = []
      for (let i = 0; i < val.length; ++i) {
        acc[i] = val[i].account
      }
      this.userGroupParam.group = this.queryParams.roleGroup
      this.userGroupParam.account = acc
      addUser(this.userGroupParam).then((res) => {
        if (res.code === 0) {
          this.$notify({
            title: '成功',
            message: '修改组成员成功',
            type: 'success'
          })
        }
      })
    }
  }
}
</script>

<style scoped="scoped">
  .relation_doc_search .search_opeation {
    padding-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .el-form-item {
    display: inline-block !important;
  }
  .app-container {
    margin-top: -5vh;
    padding: 20px;
    height: auto;
  }
  .el-form-item__label {
    display: none;
    width: 0px !important;
  }
  .search_result {
    height: 510px;
    border: 1px solid #eee
  }
  .textitem {
    position: relative;
    margin: 5px;
    background: #F1F4F7;
    width: 300px;
    height: 120px;
    text-align: center;
  }
</style>
